<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width,initial-scale=1.0">
        <title>demo2-15</title>
        <script src="vue.js"></script>
    </head>
</html>
<body>
    <div id="app">
        <h3>银行账户余额变更通知</h3>
        <p>账号：3001237890122</p>
        <p>余额为：{{count}}元</p>
        支出人民币：<imput type="text" v-model="money"/>&nbsp;&nbsp;
        <button type="button"@click="changeMoney()">支出{{money}}元</button>
        <p>支出后余额为：{{count}}元</p>
        <h3>以下是支出明细账</h3>
        {{detail}}
        <hr>
    </div>
</body>
<script tupe="text/javascript">
    const appCom ={
        data(){
            return{
                count:10000,
                money:500,
                record:[]
            }
        },
        watch:{
            count(newValue,oldValue){
                alert('账户余额由：'+oldValue+'变为'+newValue+'元!');
            }
        },
        methods: {
            changeMoney(){
                if(this.money<=0){
                    alert('请输入正确取款金额！');
                    return;
                }
                if(this.monty>this.count){
                    alert('余额不足，请重新输入取款金额！');
                    return;
                }
                this.count = this.count-this.monty;
                this.record.push(this.money);
            }
        },
        computed:{
            detail(){
                let str='';
                for(let i = 0;i<this.record.length;i++){
                    str = str+'第'+(i+1)+'次取款：'+this.record[i]+'元；';
                }
                return str;
            }
        }
    };
    Constapp=Vue.createApp(appCom).mount("#app");
</script>
</html>